<template>
	<view class="qcbg">
		<view>
			<view v-if="yqm" class="center">
				<view class="title">我的专属邀请码</view>
				<view class="ma">邀请码：{{yqm}}</view>
				<!-- <view class="tips">邀请的好友也可在注册时直接填写邀请码</view> -->
				<view class="newtips">
					<view class="tipsleft"></view>
					<view class="tipscenter"></view>
					<view class="tipsright"></view>
				</view>
				<view class="qs">
					<image class="qslogo" src="../index/WebViewAuthorize/html/logo.png" mode="widthFix"></image>
					<uqrcode mode='view' class="qsma" ref="uQRCode" :text="qrmain" />
					<!-- <image v-if="dddimg" style="width: 300upx;height: 300upx;" :src="dddimg"></image> -->
				</view>
				<view class="btn"><button v-if="qrmain" class="btnbg" type="default" @click="test()">发送邀请码</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		qr,
	} from '@/api/club'
	export default {
		data() {
			return {
				dddimg: '',
				ddd: true,
				yqm: '',
				qrmain: '',
			}
		},
		onLoad() {
			this.qr();
		},
		onNavigationBarButtonTap() {
			let this_ = this;

			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var bitmap = null;
			// 获取当前页面 webview 的对象实例
			var currentWebview = page.$getAppWebview();
			bitmap = new plus.nativeObj.Bitmap('amway_img');
			// 将webview内容绘制到Bitmap对象中
			currentWebview.draw(bitmap, function() {
				bitmap.save("_doc/a.jpg", {}, function(i) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 2,
						imageUrl: i.target,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							bitmap.clear(); //销毁Bitmap图片
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}, function(e) {
					console.log('保存图片失败：' + JSON.stringify(e));
				});
			}, function(e) {
				console.log('截屏绘制图片失败：' + JSON.stringify(e));
			});

		},
		methods: {

			qr() {
				qr().then(res => {
					console.log(res)
					if (res.success == 1) {
						this.yqm = res.data;
						this.qrmain = 'http://118.190.159.217:8090/#/pages/login/login?invitacode=' +
							encodeURIComponent(res.data);
						// this.qrmain = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

						// console.log(this.qrmain)
						this.toTempFilePath()
						this.save()
					} else {
						uni.showToast({
							title: '生成失败',
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			save() {
				this.$nextTick(() => {
					this.$refs.uQRCode.save({
						success: res => {
							console.log(res)
						}
					})
				})
			},
			toTempFilePath() {
				let this_ = this;
				this.$nextTick(() => {
					this.$refs.uQRCode.toTempFilePath({
						complete: res => {
							// let src = 'file://' + plus.io.convertLocalFileSystemURL(res.tempFilePath)
							this.dddimg = plus.io.convertLocalFileSystemURL(res.tempFilePath);
							console.log(res.tempFilePath)
							// this_.objectURLToBlob(res.tempFilePath).then(res => {
							// 	this_.dddimg = res;
							// });

							this.ddd = false;
							// this.img();
						}
					})
				})
			},
			test() {
				// if (this.ddd != false) {
				// 	uni.showToast({
				// 		title: '生成失败',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return;
				// }
				let this_ = this;

				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				var bitmap = null;
				// 获取当前页面 webview 的对象实例
				var currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中
				currentWebview.draw(bitmap, function() {
					// console.log('截屏绘制图片成功');
					bitmap.save("_doc/a.jpg", {}, function(i) {
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								bitmap.clear(); //销毁Bitmap图片
								uni.showToast({
									title: '保存图片成功,快来邀请好友加入吧！',
									mask: false,
									duration: 1500,
									icon: 'none'
								});
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
			}, //BlobUrl转blob数据
			objectURLToBlob(blodurl) {
				uni.showLoading({
					title: '压缩中...'
				});
				return new Promise((resolve, reject) => {
					var http = new XMLHttpRequest();
					http.open('GET', blodurl, true);
					http.responseType = 'blob';
					http.onload = function(e) {
						if (this.status == 200 || this.status === 0) {
							// console.log('blod数据',this.response);
							// 在将blod数据转为file
							let files = new window.File([this.response], 'file.name', {
								type: 'image'
							});
							// console.log('blod数据转换file',files);
							resolve(files);
							uni.hideLoading();
						}
					};
					http.send();
				});
			},
		}
	}
</script>

<style>
	page {
		/* background-color: #6667AB; */
		background-color: #E1E1E1;
		/* background: linear-gradient(0deg, #f45c4b 0%, #ed4146 100%); */
		background-image: url('../../static/newbg/newbigbg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}
</style>
<style scoped lang="scss">
	.qcbg {
		height: 100vh;
		width: 100vw;
		// background-image: url('../../static/tabsIcon/table.png');
		background-size: 100% 100%;

		.center {
			position: relative;
			background-color: #FFFFFF;
			// background-image: url('../../static/tabsIcon/qrbg.png');
			background-size: 100% 100%;
			height: 70vh;
			width: 80vw;
			top: 15vh;
			left: 10vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;

			.title {
				margin-top: 80upx;
				letter-spacing: 6upx;
				font-size: 48upx;
				font-weight: 600;
				font-family: PingFang-SC-Bold;
				color: #141414;
				opacity: 1;
			}

			.ma {
				margin-top: 40upx;
				font-size: 28upx;
				font-family: PingFang-SC-Heavy;
				// color: #EC5050;
				color: #868686;
				letter-spacing: 5upx;
				opacity: 1;
			}

			.tips {
				margin-top: 10upx;
				font-size: 20upx;
				font-family: PingFang-SC-Regular;
				color: #999999;
				opacity: 1;
			}

			.qs {
				margin-top: 60upx;
				height: 400upx;
				width: 400upx;
				// background-color: #18BC37;
				// background-image: url("../../static/tabsIcon/qcborder.png");
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				.qslogo {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 60upx;
					height: 60upx;
					z-index: 2022;
					border-radius: 20upx;
				}

				.qsma {
					// width: 200upx;
					// height: 200upx;
				}
			}

			.btn {}

			.btn {
				// height: ;
				width: 100%;
				margin-top: 100upx;

				.btnbg {
					width: 80%;
					border-radius: 999rem;
					background-color: #FF1854;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.newtips{
		// background-color: #0077AA;
		height: 60upx;
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.tipsleft{
			// margin-left: -1upx;
			height: 60upx;
			width: 40upx;
			background-color: #fd2c2f;
			border-radius: 0 40upx 40upx 0;
		}
		.tipscenter{
			height: 35upx;
			width: 85%;
			// background-color: #007AFF;
			border-bottom: 1upx dashed #FF1854;
		}
		.tipsright{
			height: 60upx;
			width: 40upx;
			background-color: #fd2c2f;
			border-radius: 40upx 0 0 40upx;
		}
	}
</style>
